<template>
  <div 
    :class="className" 
    :id="id" 
    :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts';
import resize from './mixins/resize';

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '200px'
        },
        height: {
            type: String,
            default: '200px'
        }
    },
    data() {
        return {
            chart: null
        };
    },
    mounted() {
        this.initChart();
    },
    beforeDestroy() {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        initChart() {
            this.chart = echarts.init(document.getElementById(this.id));
            const xData = (function () {
                const data = [];
                for (let i = 1; i < 13; i++) {
                    data.push(i + 'month');
                }
                return data;
            }());
            this.chart.setOption({
                backgroundColor: '#344b58',
                title: {
                    text: 'statistics',
                    x: '20',
                    top: '20',
                    textStyle: {
                        color: '#fff',
                        fontSize: '22'
                    },
                    subtextStyle: {
                        color: '#90979c',
                        fontSize: '16'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    borderWidth: 0,
                    top: 150,
                    bottom: 95,
                    textStyle: {
                        color: '#fff'
                    }
                },
                legend: {
                    x: '5%',
                    top: '10%',
                    textStyle: {
                        color: '#90979c'
                    },
                    data: ['female', 'male', 'average']
                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#90979c'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0

                    },
                    data: xData
                }],
                yAxis: [{
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#90979c'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0
                    },
                    splitArea: {
                        show: false
                    }
                }],
                dataZoom: [{
                    show: true,
                    height: 30,
                    xAxisIndex: [
                        0
                    ],
                    bottom: 30,
                    start: 10,
                    end: 80,
                    handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                    handleSize: '110%',
                    handleStyle: {
                        color: '#d3dee5'

                    },
                    textStyle: {
                        color: '#fff' },
                    borderColor: '#90979c'

                }, {
                    type: 'inside',
                    show: true,
                    height: 15,
                    start: 1,
                    end: 35
                }],
                series: [{
                    name: 'female',
                    type: 'bar',
                    stack: 'total',
                    barMaxWidth: 35,
                    barGap: '10%',
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,144,128,1)',
                            label: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                },
                                position: 'insideTop',
                                formatter(p) {
                                    return p.value > 0 ? p.value : '';
                                }
                            }
                        }
                    },
                    data: [
                        709,
                        1917,
                        2455,
                        2610,
                        1719,
                        1433,
                        1544,
                        3285,
                        5208,
                        3372,
                        2484,
                        4078
                    ]
                },

                {
                    name: 'male',
                    type: 'bar',
                    stack: 'total',
                    itemStyle: {
                        normal: {
                            color: 'rgba(0,191,183,1)',
                            barBorderRadius: 0,
                            label: {
                                show: true,
                                position: 'top',
                                formatter(p) {
                                    return p.value > 0 ? p.value : '';
                                }
                            }
                        }
                    },
                    data: [
                        327,
                        1776,
                        507,
                        1200,
                        800,
                        482,
                        204,
                        1390,
                        1001,
                        951,
                        381,
                        220
                    ]
                }, {
                    name: 'average',
                    type: 'line',
                    stack: 'total',
                    symbolSize: 10,
                    symbol: 'circle',
                    itemStyle: {
                        normal: {
                            color: 'rgba(252,230,48,1)',
                            barBorderRadius: 0,
                            label: {
                                show: true,
                                position: 'top',
                                formatter(p) {
                                    return p.value > 0 ? p.value : '';
                                }
                            }
                        }
                    },
                    data: [
                        1036,
                        3693,
                        2962,
                        3810,
                        2519,
                        1915,
                        1748,
                        4675,
                        6209,
                        4323,
                        2865,
                        4298
                    ]
                }
                ]
            });
        }
    }
};
</script>
